<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <style>
    .avatar {
      width: 60px;
      height: 60px;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      flex-wrap: wrap-reverse;
      border: #000 1px solid;
      margin: 30px;
    }

    .avatarImg {
      width: 60px;
      height: 60px;
      display: flex;
      justify-content: center;
      align-items: center;
      align-content: center;
      background-color: #bfa;
    }

    .avatarItem--1 {
      width: 98%;
      height: 98%;
      
    }

    .avatarItem--2 {
      width: 47%;
      height: 47%;
      margin: 1%;
    }


    .block {
      width: 30px;
      height: 30px;
      color: green;
    }
  </style>
  <style></style>
  <body>
    <div class="avatar">

      <!-- <div class="avatarImg avatarItem--1">1</div> -->

      <!-- <div class="avatarImg avatarItem--2">1</div>
      <div class="avatarImg avatarItem--2">2</div> -->


      <!-- <div class="avatarImg avatarItem--2">1</div>
      <div class="avatarImg avatarItem--2">2</div>
      <div class="avatarImg avatarItem--2">3</div> -->

      <!-- <div class="avatarImg avatarItem--2">1</div>
      <div class="avatarImg avatarItem--2">2</div>
      <div class="avatarImg avatarItem--2">3</div>
      <div class="avatarImg avatarItem--2">4</div> -->

    </div>
  </body>
  <script>


//计算头像布局
computedAvatar(avatarList) {
    if(avatarList.length > 4) {
        return "avatarItem--3"
    }else if(avatarList.length > 1) {
        return "avatarItem--2"
    }else {
        return "avatarItem--1"
    }
}
// ————————————————
// 版权声明：本文为CSDN博主「港式柠檬茶！」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
// 原文链接：https://blog.csdn.net/wantingtr/article/details/96601275
  </script>
</html>
